@import "../../css/var.less";
@import "mallpublic.less";

.w1200{
    width: 1200px;
    margin: 0 auto;
}
.w300{
    width: 300px;
}
.mall{
    .mall-top{
        height: 32px;
        background: #03a3a8;
        line-height: 23px;
        padding: 3px 0px;
        font-size: 14px;
        color: #fff;
        ul{
           .fr;
            li{
                .fl;
                height: 26px;
                overflow: hidden;
                padding:0 25px;
                border-right: 1px solid #fff;
                &:nth-child(1){
                    img{
                        width: 26px;
                        height: 26px;
                        border-radius: 100%;
                        margin-right: 3px;
                    }
                }
                &::nth-child(6){
                    border-right: none;
                }
                a{
                    color: #fff;
                }
            }
        }
    }
    .mall-tops{
        height: 158px;
        line-height: 158px;
        .mall-tops-m{
            width: 606px;
            border: 1px solid #03a3a8;
            height: 36px;
            margin-top: 62px;
            position: relative;
            .mall-tops-m-l{
                width: 120px;
                position: absolute;
                left: 0;
                top: 0;
                width: 120px;
                height: 36px;
                .el-select,.el-input,input{
                    width: 120px;
                    height: 34px;
                    position: absolute;
                    top: 0px;
                    left: 0px;
                    border: none;
                    background: #f8f8f8;
                    border-right: 1px solid #c6c6c6;
                    border-radius: 0px;
                    i{
                        height: 14px;
                        width: 14px;
                        position: absolute;
                        right: 10px;
                        top: 12px;
                        &::before{
                            margin-top: -5px;
                        }
                    }
                }
            }
            .mall-tops-m-r{
                width: 486px;
                height: 34px;
                position: absolute;
                left: 120px;
                top: 0;
                input,.el-input{
                    position: absolute;
                    height: 34px;
                    width: 480px;
                    left: 0px;
                    top: 0px;
                    border: none;
                }
                img{
                    position: absolute;
                    cursor: pointer;
                    right: 15px;
                    top: 8px;
                    z-index: 10;
                }
            }
        }
        .mall-tops-r{
            width: 140px;
            height: 36px;
            line-height: 34px;
            border: 1px solid #03a3a8;
            margin-left: 20px;
            margin-top: 62px;
            text-align: center;
            cursor: pointer;
            position: relative;
            display: block;
            .icon-cart{
                color: #c81623;
                font-weight: 700;
            }
            &>span{
                font-size: 12px;
                color: #202020;
                margin:0 10px 0 2px;
            }
            .icon-jiantou{
                font-size: 12px;
                color: #202020;
            }
        }
    }
    .mall-mains{
        background: #f9f9f9;
        .w1200{
            position: relative;
            .el-carousel{
                .el-carousel__arrow{
                    z-index: -10;
                }
                .el-carousel__indicators{
                    padding-bottom: 20px;
                    left: 80%;
                    .el-carousel__indicator{
                        width: 12px;
                        height: 12px;
                        border-radius: 100%;
                        padding: 0;
                        margin-left: 10px;
                        background: #fff;
                        .el-carousel__button{
                            width: 0px;
                            height: 0px;
                        }
                    }
                    .is-active{
                        background:#03a3a8;
                    }
                }
            }
            .w1200-img{
                width: 1200px;
                height: 350px;
            }
            .mall-mains-l{
                position: absolute;
                height: 350px;
                left: 0;
                top: 0;
                background: rgba(255, 255, 255, 0.94);
                z-index: 100;
                .mall-mains-l-top{
                    font-size: 18px;
                    color: #202020;
                    height: 56px;
                    line-height: 56px;
                    text-indent: 20px;
                    font-weight: bold;
                }
                ul{
                    li{
                        height: 36px;
                        line-height: 36px;
                        color: #666666;
                        font-size: 14px;
                        padding-left: 20px;
                        position: relative;
                        .mall-mains-l-title{
                            font-size: 16px;
                            color: #202020;
                            font-weight: bold;
                        }
                        span{
                            margin-right: 5px;
                        }
                        .mall-mains-r{
                            width: 900px;
                            height: 350px;
                            background: #fff;
                            position: absolute;
                            left: 300px;
                            display: none;
                        }
                        .mall-mains-r1{
                            top: -56px;
                        }
                        .mall-mains-r2{
                            top: -92px;
                        }
                        .mall-mains-r3{
                            top: -128px;
                        }
                        .mall-mains-r4{
                            top: -164px;
                        }
                        .mall-mains-r5{
                            top: -200px;
                        }
                        .mall-mains-r6{
                            top: -236px;
                        }
                        &:hover{
                            background: #cbeff0;
                            .mall-mains-r{
                                display: block;
                            }
                        }
                    }

                }
            }
        }
    }
    .mall-mains-recommend{
        background: #f9f9f9;
        height: 380px;
        padding-top: 20px;
        .mall-mains-recommend-l,.mall-mains-recommend-r{
            height: 360px;
        }
        .mall-mains-recommend-l{
            width: 220px;
            background: url('../../images/mall2.jpg') 0 0 no-repeat;
            text-align: center;
            padding-top: 110px;
            font-size: 20px;
            color: #fff;
            .mall-mains-recommend-l-txt{
                margin-top: 170px;
            }
            div{
                span{
                    font-size: 30px;
                }
                img{
                    margin-top: -6px;
                }
            }
            
            .mall-mains-recommend-img{
                width: 134px;
                display:inline-block;
                margin-bottom: 40px;
            }
        }
        .mall-mains-recommend-r{
            width: 980px;
            background: #fff;
        }
    }
    .mall-mains-special{
        background: #f9f9f9;
        height: 757px;
        .mall-mains-specials-more{
            font-size: 16px;
            color: #009ea3;
            img{
                margin-top: -3px;
            }
        }
        .mall-mains-special-top{
            height: 87px;
            font-size: 16px;
            color: #666666;
            padding-top: 40px;
            .color{
                font-size: 26px;
                color: #009ea3;
            }
        }
        .mall-mains-special-bottom{
            height: 670px;
            background: #fff;
            .mall-mains-special-bottom-l,.mall-mains-special-bottom-r{
                height: 670px;
            }
            .mall-mains-special-bottom-l{
                width: 300px;
                position: relative;
                .mall-mains-special-bottom-l-txt{
                    width: 250px;
                    height: 100px;
                    position: absolute;
                    left: 25px;
                    bottom: 55px;
                    background: rgba(0, 0, 0, 0.4);
                    cursor: pointer;
                    font-size: 20px;
                    color: #fff;
                    text-align: center;
                    padding-top: 12px;
                    span{
                        font-size: 30px;
                    }
                    img{
                        margin-top: -6px;
                    }
                }
            }
            .mall-mains-special1{
                background: url('../../images/mall3.jpg') 0 0 no-repeat;
            }
            .mall-mains-special2{
                background: url('../../images/mall5.png') 0 0 no-repeat;
            }
            .mall-mains-special3{
                background: url('../../images/mall4.jpg') 0 0 no-repeat;
            }
            .mall-mains-special-bottom-r{
                width: 900px;   
            }
            .mall-mains-recommend-rs{
                .w25{
                    height: 335px;
                    .w25-w{
                        .mall-mains-recommend-t{
                           margin-top: 8px;
                        }
                        .mall-mains-recommend-t-m{
                            margin-top: 10px;
                        }
                    }
                }
               
            }
        }
    }
    .mall-mains-specials{
        height: 333px;
        
        .mall-mains-specials-botton{
            height: 245px;
            .w25{
                .fl;
                width: 292.5px;
                height: 245px;
                background: #fff;
                margin-right: 10px;
                &:nth-child(4){
                    margin-right: 0px;
                }
                .mall-mains-specials-botton-t{
                    font-size: 16px;
                    color: #666666;
                    padding:7px;
                }
                .mall-mains-specials-botton-b{
                    .mall-mains-specials-botton-b-l{
                        img{
                            width: 190px;
                            height: 190px;
                        }
                    }
                    .mall-mains-specials-botton-b-r{
                        margin: 0 3px;
                        width: 96px;
                        height: 190px;
                        div{
                            height: 95px;
                            text-align: center;
                            line-height: 95px;
                        }
                    }
                }
            }
        }
    }
    .mall-mains-recommend-rs{
        width: 980px;
        height: 360px;
        .w25{
            width: 25%;
            height: 360px;
            cursor: pointer;
            &:hover{
                background: #f9f9f9;
            }
            .w25-w{
                width: 180px;
                margin: 0 auto;
                padding-top: 32px;
                img{
                    width: 180px;
                    height: 180px;
                }
                .mall-mains-recommend-t{
                    width: 180px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space:nowrap;
                    font-size: 16px;
                    color: #202020;
                    margin-top: 15px;
                    text-align: center;
                }
                .mall-mains-recommend-ts{
                    font-size: 14px;
                    color: #666666;
                }
                .mall-mains-recommend-t-m{
                    font-size: 26px;
                    color: #fa4211;
                    margin-top: 20px;
                }
            }
        }
    }
    .mall-mains-brand{
        height: 370px;
        .mall-mains-brand-bottom{
            height: 280px;
            .mall-mains-brand-bottoms{
                border-bottom: 1px solid #e8e8e8;
                &:nth-child(2){
                    border-bottom: 0px;
                }
                .w20{
                    .fl;
                    text-align: center;
                    border-right: 1px solid #e8e8e8;
                    background: #fff;
                    height: 140px;
                    width: 20%;
                    &:nth-child(5){
                        border-right: 0px;
                    }
                    .mall-mains-brand-img{
                        height: 100px;
                        line-height: 100px;
                    }
                    .mall-mains-brand-txt{
                        width: 100%;
                        font-size: 16px;
                        color: #666666;
                    }
                }
            }
            
        }
    }

}
.mall-mains-bottoms{
    background: #f9f9f9;
    font-size: 14px;
    color: #666;
    text-align: center;
    padding: 150px 0;
    div{
        margin-bottom: 10px;
    }
}


.mall-order{
    .mall-order-orders{
        padding: 25px 0 60px 0;
        background: #f8f8f8;
        .mall-order-orders-top{
            background: #eeeeee;
        }
        .mall-order-screen{
            height: 74px;
            padding: 20px 0 20px 20px;
            background: #fff;
            span{
                display: inline-block;
                width: 80px;
                height: 34px;
                line-height: 34px;
                text-align: center;
                cursor: pointer;
                background: #009ea3;
                margin-right: 10px;
                font-size: 14px;
                color: #fff;
                border-radius: 4px;
                &:nth-child(2){
                    background: #fff;
                    border: 1px solid #dae0e0;
                    color: #202020;
                }
            }
        }
        .mall-order-list{
            font-size: 14px;
            padding: 0 20px 80px;
            background: #fff;
            .mall-w1{
                width: 566px;
            }
            .mall-w2{
                width: 140px;
            }
            .mall-w3{
                width: 140px;
            }
            .mall-w4{
                width: 152px;
            }
            .mall-w5{
                width: 160px;
            }
            .mall-order-list-top{
                height: 32px;
                line-height: 32px;
                background: #f5f5f5;
                div{
                    height: 32px;
                    text-align: center;
                }
                .mall-w1{
                    text-align: left;
                    text-indent: 42px;
                }
            }
        }
        .mall-order-lists{
            background: #fff;
            font-size: 14px;
            .mall-order-lists-details{
                margin-top: 16px;
                border: 1px solid #dae0e0;
                .mall-order-lists-details-t{
                    padding-left: 20px;
                    background: #f5f5f5;
                    height: 38px;
                    line-height: 38px;
                    span{
                        color: #888888;
                        &:nth-child(2){
                            margin-left: 38px;
                        }
                        &:nth-child(3){
                            color: #202020;
                        }
                    }
                }
                .mall-order-lists-details-m{
                    height: 104px;
                    .mall-w1,.mall-w2,.mall-w3,.mall-w4,.mall-w5{
                        height: 104px;
                        border-right: 1px solid #f5f5f5;
                    }
                    .mall-w5{
                        border-right: 0px;
                    }
                    .mall-w4{
                        color: #009ea3;
                    }
                    .mall-w2,.mall-w3,.mall-w4{
                        text-align: center;
                        line-height: 104px;
                    }
                    .mall-w1{
                        .mall-order-lists-details-img{
                            height: 102px;
                            width: 108px;
                            line-height: 102px;
                            text-align: center;
                            img{
                                width: 80px;
                                height: 80px;
                            }
                        }
                        .mall-order-lists-details-txt{
                            padding-top: 22px;
                            color: #888888;
                            div{
                                &:nth-child(1){
                                    color: #202020;
                                }
                            }
                        }
                    }
                    .mall-w5{
                        text-align: center;
                        .mall-order-lists-details-txts{
                            height: 104px;
                            line-height: 104px;
                            cursor: pointer;
                        }
                        .mall-w5-list1{
                            div{
                                width: 90px;
                                margin: 4px auto;
                                cursor: pointer;
                                &:nth-child(1){
                                    height: 34px;
                                    color: #fff;
                                    background: #0db4b9;
                                    border-radius: 4px;
                                    line-height: 34px;
                                    text-align: center;
                                    margin: 15px auto 4px;
                                }
                            }
                        }
                        .mall-w5-list2{
                            div{
                                &:nth-child(1){
                                    margin: 20px auto 10px;
                                }
                            }
                        }
                    }
                }
            }
        }
        .mall-mains-list-page{
            height: 48px;
            background: #eeeeee;
            padding-top: 8px;
            padding-left: 600px;
        }
    }
    .mall-order-orders-details{
        .mall-order-orders-detailss{
            padding: 0 20px;
            font-size: 14px;
            background: #fff;
            .mall-order-orders-detailss-num{
                height: 58px;
                line-height: 58px;
                color: #202020;
                border-bottom: 1px solid #e2e2e2;
                span,i{
                    font-weight: bold;
                }
            }
            .mall-order-orders-detailss-txt{
                height: 110px;
                border-bottom: 1px solid #e2e2e2;
                position: relative;
                .w33{
                    width: 33%;
                    padding-top: 12px;
                    color: #202020;
                    div{
                        line-height: 28px;
                        span{
                            color: #0db4b9;
                        }
                    }
                }
                .mall-order-orders-statue{
                    position: absolute;
                    width: 90px;
                    height: 32px;
                    border-radius: 4px;
                    color: #fff;
                    line-height: 32px;
                    text-align: center;
                    background: #f7ac29;
                    cursor: pointer;
                    right: 0px;
                    bottom: 20px;
                }
            }
            .mall-order-orders-detailss-logistics{
                height: 120px;
                border-bottom: 1px solid #e2e2e2;
                .logistics-top{
                    color: #202020;
                    font-weight: bold;
                    padding: 15px 0 10px 0;
                }
                .logistics-bottom{
                    .logistics-bottom-img{
                        margin-right: 10px;
                    }
                    .logistics-bottom-m{
                        line-height: 26px;
                        div{
                            &:nth-child(1){
                                span{
                                    margin-left: 155px;
                                }
                            }
                            &:nth-child(2){
                                color: #202020;
                                span{
                                    font-weight: bold;
                                    margin-right: 10px;
                                }
                                
                            }
                        }
                    }
                }
            }
            .mall-order-orders-detailss-list{
                font-size: 14px;
                .mall-order-orders-detailss-lists{
                    height: 144px;
                    border: 1px solid #dae0e0;
                    margin-top: 20px;
                    .lists-top{
                        height: 40px;
                        line-height: 40px;
                        color: #888888;
                        background: #f5f5f5;
                        text-indent: 10px;
                        span{
                            color: #202020;
                            &:nth-child(1){
                                margin-right: 40px;
                            }
                        }
                    }
                    .lists-bottom{
                        height: 102px;
                        .lists-bottom-w{
                            height: 102px;
                            border-right: 1px solid #dae0e0;
                            &:nth-child(5){
                                border-right: 0px;
                            }
                        }
                        .lists-bottom-w1{
                            width: 452px;
                            .lists-bottom-w1-img{
                                width: 100px;
                                height: 102px;
                                line-height: 102px;
                                text-align: center;
                                img{
                                    width: 80px;
                                    height: 80px;
                                }
                            }
                            .lists-bottom-w1-txt{
                                padding-top: 15px;
                                color: #666666;
                                div{
                                    line-height: 24px;
                                }
                            }
                        }
                        .lists-bottom-w2{
                            width: 160px;
                        }
                        .lists-bottom-w3{
                            width: 170px;
                        }
                        .lists-bottom-w4{
                            width: 180px;
                        }
                        .lists-bottom-w5{
                            width: 196px;
                        }
                        .lists-bottom-w2,.lists-bottom-w3,.lists-bottom-w4,.lists-bottom-w5{
                            text-align: center;
                            padding-top: 35px;
                            div{
                                &:nth-child(1){
                                    color: #202020;
                                }
                                &:nth-child(2){
                                    color: #888888; 
                                }
                            }
                        }
                    }
                }
            }
            .mall-orders-detailss-message-collect,.mall-orders-detailss-message-remarks{
                padding: 18px 0;
                margin-top: 20px;
                border-top: 1px solid #dae0e0;
                border-bottom: 1px solid #dae0e0;
                .w50{
                    width: 50%;
                    line-height: 24px;
                    div{
                        color: #202020;
                        span{
                            color: #666666;
                            display: inline-block;
                            width: 100px;
                        }
                    }
                    .top{
                        font-weight: bold;
                    }
                }
            }
            .mall-orders-detailss-message-remarks{
                margin-top: 0px;
                border-top: 0px;
                padding-bottom: 20px;
                .top{
                    font-weight: bold;
                    margin-bottom: 5px;
                }
                .mall-orders-detailss-message-remarkss{
                    div{
                        &:nth-child(1){
                            width: 100px;
                            color: #666666;
                        }
                        &:nth-child(2){
                            width: 1050px;
                            color: #202020;
                        }
                    }
                }
            }
            .mall-orders-detailss-money{
                padding: 20px 20px 30px 0;
                background: #fff;
                text-align: right;
                color: #202020;
                line-height: 30px;
                span{
                    font-size: 30px;
                    color: #ff440a;
                }
            }
        }
    }
    .mall-mains-opinion{
        background: #f9f9f9;
        .w1200{
            background: #fff;
            .mall-mains-opinion-top{
                height: 48px;
                border-bottom: 1px solid #dfdfdf;
                background: #f9f9f9;
                span{
                    display: inline-block;
                    height: 48px;
                    line-height: 56px;
                    padding: 0 16px;
                    color: #009ea3;
                    border-bottom: 2px solid #009ea3;
                }
            }
            .mall-mains-opinion-main{
                height: 552px;
                background: #fff;
                font-size: 14px;
                .mall-mains-opinion-main-t{
                    height: 86px;
                    line-height: 86px;
                    width: 280px;
                    margin: 0 auto;
                    ul{
                        li{
                            .fl;
                            width: 50%;
                            text-align: center;
                            &:nth-child(1){
                                position: relative;
                                &::after{
                                    content: "";
                                    display: block;
                                    width: 1px;
                                    height: 16px;
                                    position: absolute;
                                    right: 0px;
                                    top: 35px;
                                    background: #727272;
                                }
                            }
                            span{
                                display: inline-block;
                                width: 54px;
                                height: 34px;
                                line-height: 34px;
                                text-align: center;
                            }
                            .active{
                                color: #009ea3;
                                border-bottom: 2px solid #009ea3;
                            }
                        }
                    }
                }
                .mall-mains-opinion-main-m{
                    width: 670px;
                    margin: 0 auto;
                    .opinion1,.opinion2,.opinion3{
                      height: 40px;
                      line-height: 40px;
                      margin-bottom: 20px;
                    }
                    .opinion1-l{
                        width: 96px;
                        span{
                            color: #f49b9b;
                            display: inline-block; 
                            width: 10px;
                        }
                    }
                    .el-select{
                        width: 428px;
                    }
                    .el-input{
                        width: 428px;
                        color: #888888;
                    }
                    textarea{
                        width: 570px;
                        height: 168px;
                        display: inline-block;
                        border: 1px solid #dcdfe6;
                        padding-top: 10px;
                        padding-left: 20px;
                        outline: none;
                        color: #888888;
                        resize:none;
                    }
                    p{
                        text-align: right;
                        font-size: 12px;
                        color: #888888;
                        margin-top: -20px;
                    }
                }
                .mall-mains-opinion-add{
                    padding-left: 95px;
                    div{
                        span{
                            .fl;
                            margin-right: 20px;
                            display: inline-block;
                            width: 134px;
                            height: 42px;
                            cursor: pointer;
                            line-height: 42px;
                            text-align: center;
                            background: #009ea3;
                            border-radius: 4px;
                            color: #fff;
                            &:nth-child(2){
                                background: #fff;
                                border: 1px solid #dcdfe6;
                                color: #202020;
                            }
                        }
                    }
                }
            } 
        }
        
    }
}